<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Cloudy | Content</title>
</head>

<%@ include file="template/headerContent.jsp" %>
<script type="text/javascript">

$(document).ready(function () {
	var source = ["","Full-Time","Part-Time"];
	 // Create a jqxDropDownList
$("#jqxdropdownlist").jqxDropDownList({ source: source, selectedIndex: 0, width: '200px', height: '25px', theme: 'summer' });
});

$(function() {
	$('#created').avgrund({
		height: 200,
		width : 680,
		//height of the container
		holderClass: 'custom',
		showClose: true,
		showCloseText: 'Close',
		enableStackAnimation: true,
		onBlurContainer: '.body',
		template: 
	    '<form>'+
			  '<h5 style="margin-left: 20px; color: #BCBEC0; margin-top: 10px">Create Caregiver</h5>'+
			  '<table style="margin :0 auto;">'+
	    		'<tr>'+
	    			'<td>Name:</td>'+
	    			'<td><input type="text" id="user" name="user" /></td>'+
	    		'</tr>'+
	    		'<tr>'+
	    			'<td>NRIC: </td>'+
	    			'<td><input type="text" id="nric" name="nric"/> </td>'+
	   			'</tr>'+
	   	 		'<tr'>'+
	    			'<td>Gender: </td>'+
	    			'<td>'+
	    				'<input type="radio" name="gender" value="Male"> Male'+
						'<input type="radio" name="gender" value="Female"> Female'+
					'</td>'+
	   		 	'</tr>'+
	   		 	'<tr>'+
	   		 		'<td>Address:</td>'+
	   		 		'<td><input type="text" name="address" id="address" /></td>'+
	   		 		'<td colspan="2" style="border:1px solid black">GOOGLE MAP</td>'+
	   		 	'</tr>'+
	   		 	'<tr>'+
	   		 		'<td>Working Experience:</td>'+
	   		 		'<td><input type="text" name="workingexp" id="workingexp" /></td>'+
	   		 	'</tr>'+
	   		 	'<tr>'+
	   		 		'<td>Employer Type:</td>'+
	   		 		'<td>'+

					'<div id="jqxdropdownlist"></div>'+
					'</td>'+
	   		 	'</tr>'+
	    '<tr>'+
	    	'<td>'+
				'<div class="button_01 float_l"><a href="#">Create</a></div>'+
				'</td>'+
	       	'<td>'+
	    		'<div class="button_01 float_l"><a href="#">Cancel</a></div>'+
	       '</td>'+
	    '</tr>'+

	    
	    '</table>'+
	'</form>'+
	'<br />'
	});
});
</script>
<body>     
	<div class="full_width">
	<!-- Put your codes here -->
     <h1>Administrate Caregiver</h1>
     
    <table border="1">
    <thead>
		<tr>
			<th>NRIC</th>
			<th>Name</th>
			<th>Gender</th>
			<th>Address</th>
			<th>Working Experience</th>
			<th>FT/PT</th>
			<th>Booked Schedule</th>
		</tr>
 	</thead>
    
    <tbody>
<%for(int i=0; i<10; i++) {%>
    	<tr>
    		<td>S9410069J</td>
    		<td>Tan Yong Kuan</td>
    		<td>M</td>
    		<td>352 Woodlands Ave 1</td>
    		<td>5 Yrs</td>
    		<td>FT</td>
    		<td>None</td>
<%} %>
    	</tr>
    </tbody>
    </table>
    <br>
    <div class="button_01 float_l" ><a href="#" id="show">Create</a></div>
    <div class="button_01 float_l"><a href="#">Update</a></div>
    <div class="button_01 float_l"><a href="#">Delete</a></div>             
    <!-- Do not remove the BR unless your content is long -->
    <br><br><br><br><br><br><br><br><br><br>            
    <div class="cleaner"></div>
</div>

<%@ include file="template/footerContent.jsp" %>
</body>
</html>